<template>
	<view class="container">
		<view class="content">
			<view v-if="val==2">
				<view>
					<image style="width: 59px;height: 59px" src="../../static/temp/gou.png"></image>
				</view>
				<view class="child font-16 font-w-600">恭喜报名成功</view>
				<view class="child font-14" style="text-align: left;padding: 10rpx 24rpx;">记得去上课哟，若您日程有变，可在<text @click="navTo('/pages/order/orderCourseList')" style="color: #0191FF;">“我的课程”</text>取消报名，把名额让给有需要的人吧。</view>
			</view>
			<view v-else>
				<view>
					<image style="width: 59px;height: 59px" src="../../static/temp/gou.png"></image>
				</view>
				<view class="child font-16 font-w-600">已预约排队</view>
				<view class="child font-14" style="text-align: left;padding: 10rpx 55rpx;">
					<view>1、当前有<text style="color: #0191FF;">{{num}}</text>人排队，若上课前12小时未候补成功，将报名失败。</view>
					<view>2、课程候补成功后，后台会消息提醒，也可在<text @click="navTo('/pages/order/orderCourseList')" style="color: #0191FF;">“我的课程”</text>关注报名状态或取消报名预约，感谢您的理解。</view>
				</view>
			</view>
			<view class="btns">
				<!-- <view class="btn">我的课程</view> -->
				<view class="btn" @click="navTo('/pages/order/orderCourseList')">查看报名记录</view>
				<view class="btn" @click="toSwitch('/pages/course/index')">继续报名</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	export default {
		
	data() {
		return {
				val:2,
				num:0,
				course_id:0
			}
		},
		
		onLoad(option) {
			this.val = option.status;
			this.course_id=option.c_id;
			if(this.val!=2){
				this.getStatics()
			}
		},
		methods: {
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			toSwitch(url){
				uni.reLaunch({
					url:url
				})
			},
		 	async getStatics(){
				let params ={status:1,course_id:this.course_id}
				let data = await Api.apiCall('get', Api.apiName.course_order_statics, params,true);
				if (!data) { //出错时
					return;
				}
				this.num=data.data.total;
			},
		},


	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}

	.container {
		
	}
	.content{
		display: flex;
		flex-direction: column;
		text-align: center;
		margin: 40rpx;
	}
	.child{
		margin-top: 30rpx;
	}
	.font-16{
		font-size: 32rpx;
	}
	.font-14{
		font-size: 28rpx;
	}
	.font-w-600{
		font-weight: 600;
	}
	.btns{
		display: flex;
		justify-content: center;
	}
	.btn{
		border: 1px solid #CCCCCC;
		padding: 14rpx 20rpx;
		margin: 60rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		font-weight: 600;
	}
</style>